@import '~styles/settings.scss';

.c-widgets {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: rem(30px) $mobile-gutter rem(30px) $mobile-gutter;
  min-width: 100%;
  margin-bottom: rem(15px);

  > div {
    width: 100%;
    margin-bottom: rem(30px);

    @media screen and (min-width: $screen-l) {
      width: calc(50% - 15px);
      margin-bottom: rem(30px);

      &.large {
        width: 100%;
      }
    }
  }

  @media screen and (min-width: $screen-m) {
    padding-left: $desktop-gutter;
    padding-right: $desktop-gutter;
  }

  @media screen and (min-width: $screen-l) {
    padding-top: rem(30px);
    padding-right: rem(30px);
  }

  .no-widgets-message {
    position: relative;
    min-height: rem(460px);
  }

  .widgets-loader {
    position: relative;
    min-height: rem(460px);
  }

  &.simple {
    display: flex;
    padding: rem(5px) 0 rem(15px);
    border-bottom: solid 1px #e5e5df;

    > div {
      width: 100%;
      padding-bottom: rem(15px);
      margin-bottom: rem(15px);
      border-bottom: solid 1px $border;

      &:last-child {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }

    .widgets-loader {
      min-height: rem(150px);
    }
  }

  &.embed {
    .widgets-loader {
      min-height: 100%;
    }
  }

  &.no-widgets {
    border-bottom: 0;
    padding: 0;
  }
}
